<template>
  <el-container class="container">
    <el-container>
      <el-header class="header" style="height: auto">
        <!-- 第一部分是我们的房型 -->
        <div style="display: flex">
          <div :class='{active: currentIndex === index}' @click='itemClick(index, item)' class='item' v-for="(item, index) in category" :key="index">
            {{ item.label }}
          </div>
        </div>
        <br>
        <!-- 是我们的检索条件 -->
        <el-form style="border-bottom: 1px solid #efefef" :model="roomParm" :inline="true" size="small">
          <el-form-item label="房号" style="margin-bottom: 10px; font-weight: bold">
            <el-input v-model="roomParm.roomCode"></el-input>
          </el-form-item>
          <el-form-item style="margin-bottom: 10px">
            <!-- 修正 icon 属性 -->
            <el-button icon="Search" @click="searchRooms">搜索</el-button>
          </el-form-item>
          <el-form-item label="状态" style="margin-bottom: 10px; font-weight: bold;">
            <el-checkbox-group v-model="roomParm.bookStatus">
              <el-checkbox label="未入住" value="0"></el-checkbox>
              <el-checkbox label="已经预定" value="1"></el-checkbox>
              <el-checkbox label="已经入住" value="2"></el-checkbox>
              <el-checkbox label="维修中" value="3"></el-checkbox>
              <el-checkbox label="停用中" value="4"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item style="margin-bottom: 10px">
            <!-- 修正 icon 属性 -->
            <el-button icon="Refresh" @click="refreshRooms">刷新</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main class="main" style="padding: 10px 20px">
        <div class="roomList">
          <div style="position: relative"
               v-for="(item,index) in roomList"
               :key='index'
               :class="{
                 item: item['bookStatus'] === '0',
                 bookitem: item['bookStatus'] === '1',
                 useitem: item['bookStatus'] === '2',
                 repiritem: item['bookStatus'] === '3',
                 stopitem: item['bookStatus'] === '4',
               }">

            <div>{{item.infoName}}</div>
            <div style="display: flex">
              <div style="font-weight: 600; margin: 6px 0px">{{item.roomCode}}</div>
              <div style="font-weight: 600; margin: 6px 0px 6px 6px">{{item.name}}</div>
            </div>
            <div>{{status[item.bookStatus]}}</div>

            <el-icon @click="openInfo(item)" style="
                       position: absolute;
                       right: 6px;
                       bottom: 6px;
                     font-size: 18px;">
                <EditPen/>
            </el-icon>

          </div>
        </div>

      </el-main>
    </el-container>
    <el-aside class="aside" width="200px">
      <el-divider content-position="left" style="margin-bottom: 30px">颜色状态</el-divider>
      <div class="items">
        <div class="noitem">
          <div class="item-text"></div>
        </div>
        <span>空房间</span>
      </div>
      <div class="items">
        <div class="bookitem">
          <div class="item-text"></div>
        </div>
        <span>已预定</span>
      </div>
      <div class="items">
        <div class="hasitem">
          <div class="item-text"></div>
        </div>
        <span>已入住</span>
      </div>
      <div class="items">
        <div class="repiritem">
          <div class="item-text"></div>
        </div>
        <span>维修中</span>
      </div>
      <div class="items">
        <div class="stopitem">
          <div class="item-text"></div>
        </div>
        <span>停用中</span>
      </div>
      <el-divider style="margin-top: 40px; margin-bottom: 40px" content-position="left">房间总数: {{ total.totalCount }}</el-divider>
      <div class="total">
        <span>空房间: {{ total.noBookCount }}</span>
      </div>
      <div class="total">
        <span style="color: deepskyblue">已预订： {{ total.hasBookCount }}</span>
      </div>
      <div class="total">
        <span style="color: #DC5F23">已入住： {{ total.hadIntoCount }}</span>
      </div>
      <div class="total">
        <span style="color: blueviolet">维修中： {{ total.hasRepirCount }}</span>
      </div>
      <div class="total">
        <span style="color: red">停用中： {{ total.hasStopCount }}</span>
      </div>
    </el-aside>
  </el-container>
</template>

<script>
export default {
  name: 'Home',
  components: {},
  data() {
    return {
      currentIndex: 0,
      category: [
        {
          label: '全部客房',
          value: ''
        },
        {
          label: '标准客房',
          value: '1'
        },
        {
          label: '大床房',
          value: '2'
        },
        {
          label: '豪华大床房',
          value: '3'
        },
        {
          label: '商务大床房',
          value: '4'
        },
        {
          label: '家庭套房',
          value: '5'
        }
      ],
      status: ['空房间', '已预订', '已入住', '维修中', '停用中'],
      // 修正拼写错误
      roomParm: {
        typeId: '',
        roomCode: '',
        bookStatus: [],
        useStatus: ''
      },
      total: {
        noBookCount: 0,
        hasBookCount: 0,
        hadIntoCount: 0,
        hasRepirCount: 0,
        totalCount: 0
      },
      roomList: [
        {
          'roomId': 1,
          'infoId': 11,
          'roomCode': '100',
          'intoStatus': '0',
          'bookStatus': '1',
          'useStatus': '0',
          'infoName': '标准单人间',
          'typeId': '1',
          'name': null
        },
        {
          'roomId': 2,
          'infoId': 11,
          'roomCode': '101',
          'intoStatus': '0',
          'bookStatus': '0',
          'useStatus': '0',
          'infoName': '豪华三人间',
          'typeId': '1',
          'name': '张三'
        },
        {
          'roomId': 3,
          'infoId': 11,
          'roomCode': '102',
          'intoStatus': '0',
          'bookStatus': '2',
          'useStatus': '0',
          'infoName': '标准单人间',
          'typeId': '1',
          'name': '李四'
        },
        {
          'roomId': 4,
          'infoId': 11,
          'roomCode': '103',
          'intoStatus': '0',
          'bookStatus': '3',
          'useStatus': '0',
          'infoName': '家庭套房',
          'typeId': '1',
          'name': '王五'
        },
        {
          'roomId': 5,
          'infoId': 11,
          'roomCode': '104',
          'intoStatus': '0',
          'bookStatus': '4',
          'useStatus': '0',
          'infoName': '奢侈套房',
          'typeId': '1',
          'name': '刘六'
        }
      ]
    };
  },
  computed: {
    // 计算过滤后的房间列表
    filteredRoomList() {
      let filtered = this.roomList;
      const selectedType = this.category[this.currentIndex].value;
      if (selectedType) {
        filtered = filtered.filter(room => room.typeId === selectedType);
      }
      if (this.roomParm.roomCode) {
        filtered = filtered.filter(room => room.roomCode.includes(this.roomParm.roomCode));
      }
      if (this.roomParm.bookStatus.length > 0) {
        filtered = filtered.filter(room => this.roomParm.bookStatus.includes(room.bookStatus));
      }
      return filtered;
    }
  },
  methods: {
    itemClick(index, item) {
      this.currentIndex = index;
    },
    searchRooms() {
      // 搜索逻辑已经在 filteredRoomList 中实现
    },
    refreshRooms() {
      this.roomParm = {
        typeId: '',
        roomCode: '',
        bookStatus: [],
        useStatus: ''
      };
      this.currentIndex = 0;
    }
  },
  created() {
    this.total.totalCount = this.roomList.length;
  },
  mounted() {
    // 可以在这里进行一些 DOM 操作或异步请求
  }
};
</script>

<style lang='scss' scoped>
.container {
  .header {
    border-bottom: 1px solid #efefef;
    display: flex;
    flex-direction: column;

    .item {
      margin-right: 15px;
      color: black;
      cursor: pointer;
      border: 1px solid #dedfe0;
      padding: 5px 10px;
      font-size: 12px;
      border-radius: 5px;
    }

    .active {
      margin-right: 15px;
      color: #fff;
      cursor: pointer;
      background-color: #409eff;
      padding: 5px 10px;
      font-size: 12px;
      border-radius: 5px;
    }
  }

  .aside {
    padding: 15px 20px;
    border-left: 1px solid #efefef;
    /* 添加背景颜色 */
    background-color: #e0f2e9;

    .items {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .noitem {
        border: 1px solid #dedfe0;
        background-color: mediumseagreen;
        height: 25px;
        width: 50px;
        border-radius: 5px;
      }

      .hasitem {
        border: 1px solid #dedfe0;
        background-color: #DC5F23;
        height: 25px;
        width: 50px;
        border-radius: 5px;
      }

      .bookitem {
        border: 1px solid #dedfe0;
        background-color: deepskyblue;
        height: 25px;
        width: 50px;
        border-radius: 5px;
      }

      .repiritem {
        border: 1px solid #dedfe0;
        background-color: blueviolet;
        height: 25px;
        width: 50px;
        border-radius: 5px;
      }

      .stopitem {
        border: 1px solid #dedfe0;
        background-color: red;
        height: 25px;
        width: 50px;
        border-radius: 5px;
      }

      .item-text {
        font-size: 12px;
        font-weight: bold;
        margin-left: 15px;
      }

      .total {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        font-weight: bold;
        font-size: 14px;
      }
    }
  }

  .roomList {
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;

    .item {
      border: 1px solid #dedfe0;
      margin: 10px;
      border-radius: 7px;
      background-color: mediumspringgreen;
      width: 150px;
      height: 85px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    .useitem {
      border: 1px solid #dedfe0;
      margin: 10px;
      border-radius: 7px;
      background-color: #DC5F23;
      width: 150px;
      height: 85px;
      color: #ffffff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    .bookitem {
      border: 1px solid #dedfe0;
      margin: 10px;
      border-radius: 7px;
      background-color: deepskyblue;
      width: 150px;
      height: 85px;
      color: #ffffff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    .repiritem {
      border: 1px solid #dedfe0;
      margin: 10px;
      border-radius: 7px;
      background-color: blueviolet;
      width: 150px;
      height: 85px;
      cursor: pointer;
      display: flex;
      color: #ffffff;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    .stopitem {
      border: 1px solid #dedfe0;
      margin: 10px;
      border-radius: 7px;
      background-color: red;
      width: 150px;
      color: #ffffff;
      height: 85px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
  }
}
</style>